<template>
  <div>
    <div class="main" v-if="info">
      <div class="film" data-enter-time="1634709687">
        <div class="film-header">
          <div class="goBack"><img src="" alt="" /></div>
          <div class="title">{{ info.name }}</div>
          <!---->
        </div>
        <div
          data-v-21c202bd=""
          class="lazy-img film-poster"
          alt="filmPoster"
          style="width: 100%; background: rgb(249, 249, 249)"
        >
          <div
            data-v-21c202bd=""
            class="padding"
            style="width: 100%; background: rgb(249, 249, 249)"
          >
            <img data-v-21c202bd="" src="" width="64px" alt="img" />
          </div>
          <div
            data-v-21c202bd=""
            class="lazy-img-wrap"
            style="
              width: 100%;
              background: rgb(249, 249, 249);
              opacity: 1;
              display: block;
            "
          >
            <!-- 长津湖大图 -->
            <img data-v-21c202bd="" :src="info.poster" class="target-img" />
          </div>
        </div>
        <div class="film-detail">
          <div class="col">
            <div class="film-name">
              <span class="name">{{ info.name }}</span
              ><span class="item">{{ info.filmType.name }}</span>
            </div>
            <div class="film-grade">
              <span class="grade">{{ info.grade }}</span
              ><span class="grade-text"></span>
            </div>
          </div>
          <div class="film-category grey-text">
            {{ info.category | catogoryfilter }}
          </div>
          <div class="film-premiere-time grey-text">{{info.premiereAt*1000 | datefilter}}上映</div>
          <div class="film-nation-runtime grey-text">
            {{ info.nation }} | 分钟
          </div>
          <div class="test grey-text">
            {{ info.synopsis }}
          </div>
          <div class="film-synopsis grey-text hidde" style="height: 118px">
            {{ info.synopsis }}
          </div>
          <div class="toggle"><img src="" alt="" class="" /></div>
        </div>
        <div class="actors">
          <div class="actors-title-bar">
            <span class="actors-title-text">演职人员</span>
          </div>
          <div
            data-v-2d80f9ec=""
            class="row-scroll-wrapper actors-list"
            style="height: 140px; background: rgb(255, 255, 255)"
          >
            <ul data-v-2d80f9ec="" class="row-scroll-items-nav">
              <li
                data-v-624f798e=""
                class="row-scroll-item"
                data-v-2d80f9ec=""
                style="width: 85px; min-width: 85px"
                v-for="actor in info.actors"
                :key="actor.name"
              >
                <div
                  data-v-624f798e=""
                  class="actors-item"
                  style="text-align: center"
                >
                  <div
                    data-v-21c202bd=""
                    class="lazy-img actors-img"
                    data-v-624f798e=""
                    style="
                      width: 85px;
                      height: 85px;
                      background: rgb(249, 249, 249);
                    "
                  >
                    <div
                      data-v-21c202bd=""
                      class="padding"
                      style="
                        width: 85px;
                        height: 85px;
                        background: rgb(249, 249, 249);
                      "
                    >
                      <img
                        data-v-21c202bd=""
                        src="./files/maizuo_padding.png"
                        width="64px"
                        alt="img"
                      />
                    </div>
                    <div
                      data-v-21c202bd=""
                      class="lazy-img-wrap"
                      style="
                        width: 85px;
                        height: 85px;
                        background: rgb(249, 249, 249);
                        opacity: 1;
                        display: block;
                      "
                    >
                      <img
                        data-v-21c202bd=""
                        :src="actor.avatarAddress"
                        class="target-img"
                      />
                    </div>
                  </div>
                  <span data-v-624f798e="" class="actors-name">{{actor.name}}</span
                  ><span data-v-624f798e="" class="actors-role">{{actor.role}}</span>
                </div>
              </li>
            
            </ul>
          </div>
        </div>
        <div class="photos">
          <div class="photos-title-bar">
            <span class="photos-title-text">剧照</span
            >
            <span class="photos-to-all"
              >全部(5)<i
                class="iconfont icon-quanju_liebiaojiantou"
                style="font-size: 13px"
              ></i
            ></span>
          </div>
          <div
            data-v-2d80f9ec=""
            class="row-scroll-wrapper photos-list"
            style="height: 115px; background: rgb(255, 255, 255)"
          >
            <ul data-v-2d80f9ec="" class="row-scroll-items-nav">
              <li
                data-v-624f798e=""
                class="row-scroll-item photos-item-wrap"
                data-v-2d80f9ec=""
                style="width: 150px; min-width: 150px"
                v-for="photo in info.photos"
                :key="photo"
              >
                <div data-v-624f798e="" class="photos-item">
                  <div
                    data-v-21c202bd=""
                    class="lazy-img photos-img"
                    data-v-624f798e=""
                    style="
                      width: 150px;
                      height: 100px;
                      background: rgb(249, 249, 249);
                    "
                  >
                    <div
                      data-v-21c202bd=""
                      class="padding"
                      style="
                        width: 150px;
                        height: 100px;
                        background: rgb(249, 249, 249);
                      "
                    >
                      <img
                        data-v-21c202bd=""
                        src="./files/maizuo_padding.png"
                        width="64px"
                        alt="img"
                      />
                    </div>
                    <div
                      data-v-21c202bd=""
                      class="lazy-img-wrap"
                      style="
                        width: 150px;
                        height: 100px;
                        background: rgb(249, 249, 249);
                        opacity: 1;
                        display: block;
                      "
                    >
                      <img
                        data-v-21c202bd=""
                        :src="photo"
                        class="target-img"
                      />
                    </div>
                  </div>
                </div>
              </li>
            
            </ul>
          </div>
        </div>
        <a
          href="https://m.maizuo.com/v5/#/film/5618/cinemas"
          class=""
          style="height: 49px; position: fixed; bottom: 0px; width: 100%"
        >
          <div class="goSchedule">选座购票</div>
        </a>
        <!---->
        <!---->
      </div>
      <!---->
    </div>

    <div class="mint-msgbox-wrapper" style="position: absolute; z-index: 2001">
      <div class="mint-msgbox" style="display: none">
        <div class="mint-msgbox-header">
          <div class="mint-msgbox-title">提示</div>
        </div>
        <div class="mint-msgbox-content">
          <div class="mint-msgbox-message">
            无法获取当前城市定位，请手动选择所在城市
          </div>
          <div class="mint-msgbox-input" style="display: none">
            <input placeholder="" type="text" />
            <div class="mint-msgbox-errormsg" style="visibility: hidden"></div>
          </div>
        </div>
        <div class="mint-msgbox-btns">
          <button class="mint-msgbox-btn mint-msgbox-cancel" style="">
            取消
          </button>
          <button class="mint-msgbox-btn mint-msgbox-confirm">确定</button>
        </div>
      </div>
    </div>
    <div class="mint-indicator" style="display: none">
      <div class="mint-indicator-wrapper" style="padding: 15px">
        <span class="mint-indicator-spin">
          <div
            class="mint-spinner-snake"
            style="
              border-top-color: rgb(204, 204, 204);
              border-left-color: rgb(204, 204, 204);
              border-bottom-color: rgb(204, 204, 204);
              height: 32px;
              width: 32px;
            "
          ></div>
        </span>
        <span class="mint-indicator-text" style="display: none"></span>
      </div>
      <div class="mint-indicator-mask"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
</style>

<script>
import "./files/1.css";
import "./files/2.css";
import "./files/3.css";
import "./files/4.css";
import "./files/5.css";
import "./files/6.css";
import "./files/7.css";
import "./files/index.css";
import { doGet } from "../../helper/ajax_helper.js";
import { catogoryfilter,datefilter} from "../../helper/filter_helper.js";
export default {
  props: ["id"],
  filters: {
    catogoryfilter,
    datefilter
  },
  data() {
    return {
      info: null,
    };
  },
  mounted() {
    console.log("this.id=", this.id);
    doGet(
      `/gateway?filmId=${this.id}&k=4756824`,
      "mall.film-ticket.film.info",
      (ret) => {
        this.info = ret.data.film;
      }
    );
  },
};
</script>

<style lang="scss">
.photos-title-bar{
  display: flex;
  justify-content: space-between;
}
.actors-title-bar{
  text-align: left;
}
</style>